<template>
  <var-app-bar title-position="center" color="#0089f3">
    <template #default>
      <p>{{ filterTitle(titleName) }}</p>
    </template>
    <template #right>
      <var-icon name="power" color="#fdfdfd" :size="24" @click="handleLogout" />
    </template>
  </var-app-bar>
  <!-- 中间部分 -->
  <router-view></router-view>
  <!-- 底部菜单 -->
  <var-bottom-navigation
    active-color="#f7e157"
    inactive-color="#fff"
    :safe-area="true"
    v-model:active="active"
    :fixed="true"
  >
  <var-bottom-navigation-item
      v-if="auth!=='0'"
      @click="changeActive"
      name="shop"
      label="兑换中心"
      icon="cart"
    />
    <var-bottom-navigation-item
      v-if="auth==='0'"
      @click="changeActive"
      name="enroll"
      label="成为解说"
      icon="phone-outline"
    />
    <var-bottom-navigation-item
      v-if="auth==='2'"
      @click="changeActive"
      name="check"
      label="解说审核"
      icon="view"
    />
    <var-bottom-navigation-item
      v-if="auth!=='0'"
      @click="changeActive"
      name="list"
      label="选班列表"
      icon="format-list-checkbox"
    />
    <var-bottom-navigation-item
      @click="changeActive"
      name="person"
      label="我的主页"
      icon="account-circle"
    />
  </var-bottom-navigation>
  <var-popup
    overlay-class="popup-example-custom-overlay"
    v-model:show="overlayClass"
  >
    <div class="popup-example-block">
      <p>请添加导播游戏账号</p>
      <p>浊泉：299234486</p>
      <p>雨翞：260609200</p>
      <p>星宇：189664915</p>
    </div>
  </var-popup>
  <var-popup
    overlay-class="popup-example-custom-overlay"
    v-model:show="qrCode"
  >
    <div class="popup-example-block">
      <img class="qrcode" src="@/assets/images/qrcode.png" alt="">
    </div>
  </var-popup>
</template>

<script setup lang="ts">
import { Dialog, Snackbar } from "@varlet/ui";

const router = useRouter();

const active = ref("list");
const titleName = ref("list");
const actions = {
  confirm: function fun() {
    removeToken();
    Snackbar.success("该账号已退出登录！");
    sessionStorage.clear()
    router.push({ path: "/" });
  },
  cancel: () => Snackbar.error("已取消"),
  close: () => Snackbar.info("已取消"),
};

async function handleLogout() {
  actions[await Dialog("是否确认退出登录？")]();
}
function changeActive(activeItem: any) {
  active.value = activeItem;
  titleName.value = activeItem;
  router.push({ path: `/home/${activeItem}` });
}
const mapObject:any = {
  'list':'我的列表',
  'check':'解说审核',
  'person':'我的主页',
  'enroll':'解说报名',
  'shop':'兑换中心'
}
function filterTitle(title:string) {
  console.log("🐕 ~ title:", title)
  return mapObject[title]
}
const handleMoveTpo = ()=>{
  window.scrollTo(0,0)
}
// 显示导播账号
const overlayClass = ref(false)
const qrCode = ref(false)
// 展示权限
const auth = computed(()=>{
  return sessionStorage.getItem("authorization") || '0'
})
// 修改默认active
onMounted(() => {
  if(auth.value === '0'){
    active.value = 'enroll'
  }else{
    active.value = 'list'
  }
 
});
</script>

<style scoped lang="less">

.popup-example-custom-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
}

.popup-example-block {
  padding: 20px 24px;
  width: 250px;
}
.qrcode{
  width: 100%;
  height: 100%;
}


</style>
